<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
<script src="../lib/angularjs/angular.min.js"></script>
<script src="../lib/angularjs/angular-animate.min.js"></script>
<script src="../lib/angularjs/angular-route.min.js"></script>
</head>
<body ng-app="routingDemoApp">
<div class="panel panel-success">
    <div class="panel-heading">数据绑定</div>
    <div class="panel-body">
        <div style="border: 1px solid red;width: 400px;height: 200px;" ng-controller="ParentController">
            <p style="color: orange;">请认真记住以下输入框中的提示文字</p>
            记住了？<input type="checkbox" ng-model="isRemember">
            <p ng-show="isRemember">
                <input type="text" ng-model="someVal" placeholder="随意输入几个值">
                并试着改变下面两个input的值
            </p>
            <div ng-show="!isRemember || someVal" my-directive one-val="{{someVal}}" two-val="someVal" three-val="parentFun('哈哈')"></div>
        </div>
    </div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">数据绑定</div>
    <div class="panel-body">
        <div ng-controller="test">
            <div>AngularJs指令的三种绑定策略</div>
            nameExample：<input ng-model="nameExample">
            <example title="titleExample" name="nameExample" send-message="parentSendMessage('example')"></example>
        </div>
    </div>
</div>
</body>
<script>
    var app=angular.module('routingDemoApp',[]);
    app.directive('myDirective', function() {
        return {
            restrict: 'A',
            replace: true,
            scope: {
                oneVal: '@oneVal', // 相当于“值复制”
                twoVal: '=twoVal', // 相当于“引用复制”
                threeVal: '&threeVal' // 绑定父作用域中的方法
            },
            template: '<div>'+
            '<input type="text" ng-model="oneVal" placeholder="@ 改变我其他不受影响">'+
            '<input type="text" ng-model="twoVal" placeholder="= 要是动我其他都得变">'+
            '<input type="button" ng-click="threeVal()" value="$ 点我试试">'+
            '</div>'


        }
    });
    app.controller('ParentController', function($scope) {
            $scope.parentFun = function(s) {
                alert("我成功绑定了父级作用域中的函数！" + s);
            }
        })
    app.directive("example",function(){
        return {
            restrict:"E",
            scope:{
                title:"@",
                name:"=",
                sendMessage:"&"
            },
            link:function($scope,element,attrs){
                console.log('1、'+$scope.title);
                console.log('\n2、'+$scope.name);
            }
        }
    });
    app.controller("test",function($scope){
        $scope.nameExample = "nameTest"
        $scope.parentSendMessage = function(content){
            alert(content);
        }
    })
</script>
</html>